<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>优永动助手 - 注册</title>
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <script type="text/javascript" src="/layui/layui.all.js"></script>
    <link rel="stylesheet" href="/css/blog.css">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <style>
        .reg-btn {
            height: 100px;
            width: 100%;
            font-size: 42px;
            margin-top: 50px;
            background-color: green;
        }

        input {
            font-size: 38px;
        }

        .zhuce-item {
            font-size: 46px;
            font-family: "Microsoft YaHei UI";
        }

        .zhuce-item-input {
            margin-top: 10px;
            margin-bottom: 30px;
        }
        .foot-login-tip{
            margin-top: 60px;
            font-size: 36px;
        }
        .regtip{
            color: red;
            font-size: 36px;
            padding-bottom: 20px;
        }


    </style>
</head>
<body>

<div class="layui-row search-main log-title">

    <div class="layui-col-xs2" onclick="history.go(-1)">
        <i class="layui-icon layui-icon-left return-btn"></i>
    </div>

    <div class="layui-col-xs4 layui-col-xs-offset2">注册</div>

</div>
<div class="layui-row blog-main">
    <form id="regform" action="/reg" method="post">
        <div class="layui-row zhuce-item">
            用户名：
        </div>
        <div class="layui-row zhuce-item-input">
            <input type="text" name="username" autocomplete="off" placeholder="请输入用户名6-12位" class="layui-input">
        </div>

        <div class="layui-row zhuce-item">
            昵称：
        </div>
        <div class="layui-row zhuce-item-input">
            <input type="text" name="nickname" autocomplete="off" placeholder="请输入昵称" maxlength="10"
                   class="layui-input">
        </div>

        <div class="layui-row zhuce-item">
            邀请码：
        </div>
        <div class="layui-row zhuce-item-input">
            <input type="text" name="yaoqingma" autocomplete="off" placeholder="邀请码" class="layui-input">
        </div>
        <div class="layui-row regtip" th:text="'提示:'+${regtip}==null?'':${regtip}">
        </div>

        <div class="layui-row zhuce-item">
            登录密码：
        </div>
        <div class="layui-row zhuce-item-input">
            <input type="password" name="loginpass" autocomplete="off" placeholder="请输入登录密码" class="layui-input">
        </div>

        <div class="layui-row zhuce-item">
            确认密码：
        </div>
        <div class="layui-row zhuce-item-input">
            <input type="password" name="password2" autocomplete="off" placeholder="再次输入密码" class="layui-input">
        </div>

        <div class="layui-row">
            <div class="layui-col-xs8 layui-col-xs-offset2">
                <button type="button" class="layui-btn layui-btn-normal reg-btn">立即注册</button>
            </div>

        </div>
    </form>

    <div class="layui-row">
        <div class="layui-col-xs8 layui-col-xs-offset2 foot-login-tip">
            有账号了？ <a style="color: green" href="/login">我要登录</a>
        </div>

    </div>

</div>

</div>

<script>
    $(function () {
        $(".reg-btn").click(function () {
            var sub = validate();
            if(sub==false){
                return false;
            }
            $("#regform").submit();

        });
    });


    function validate() {
        var username = $("input[name=username]").val();
        if(username==''||username==null){
            alert("用户名不可为空");

            return false;
        }

        var nickname = $("input[name=nickname]").val();
        if(nickname==''||nickname==null){

            alert("昵称不可为空");

            return false;
        }
        var yaoqingma = $("input[name=yaoqingma]").val();
        if(yaoqingma==''||yaoqingma==null){

            alert("邀请码不可为空");

            return false;
        }
        var loginpass = $("input[name=loginpass]").val();
        if(loginpass==''||loginpass==null){

            alert("密码不可为空");

            return false;
        }
        var password2 = $("input[name=password2]").val();
        if(password2==''||password2==null){

            alert("确认密码不可为空");

            return false;
        }

        if(loginpass!=password2){
            alert("两次密码不一样");
            return false;
        }
    }
</script>
</body>
</html>